<template>
	<div class="daihuoshipinbang">
		<div class="fangke">
			<ul>
				<li>全部</li>
				<li v-for="(item,index) in 20" :key="index">玩具乐器</li>
			</ul>
		</div>
		
		<div class="haowubang_header">
			<div class="haowubang_header1">
				<div>
					<ul>
						<li>日榜</li>
						<li>近七天</li>
					</ul>
				</div>
				<div>
					<el-date-picker
					  v-model="value2"
					  align="right"
					  type="date"
					  placeholder="选择日期"
					  :picker-options="pickerOptions">
					</el-date-picker>
				</div>
				<div>数据说明<i class="el-icon-question"></i></div>
			</div>
			<div class="haowubang_header2">
				<span>更新日期：</span>
				<span>2020-10-28 12：07</span>
			</div>
		</div>
		
		<div class="haowubiao">
			<table cellpadding="0" cellspacing="0">
				<thead>
					<tr>
						<th>排名</th>
						<th>商品</th>
						<th>点赞数增量</th>
						<th>访客数增量</th>
						<th>访客数</th>
						<th>销量增加</th>
						<th>销量</th>
					</tr>
				</thead>
				
				<tbody>
					<tr v-for="(item,index) in 6" :key="index">
						<td>
							<img v-if="index==0" src="../../../assets/img/jinpai.png" />
							<img v-else-if="index==1" src="../../../assets/img/yinpai.png" />
							<img v-else-if="index==2" src="../../../assets/img/tongpai.png" />
							<span v-else>{{index+1}}</span>
						</td>
						<td>
							<div class="shibiaogeleft">
								<img src="../../../assets/img/shijiance.png" />
							</div>
							<div class="shibiaogeright">
								<p>
									网上段子城镇了！酒家司机翻墙逃跑,结果...翻到了武警大院网上段子城镇了！酒家司机翻墙逃跑,结果
								</p>
								<p>
									<img src="../../../assets/img/xiaoyang.png" />
									<span>小辉在路上</span>
								</p>
								<p>
									带货商品：蜀中桃子姐红油调料250克
								</p>
							</div>
						</td>
						<td>
							{{shu | guolv}}
						</td>
						<td>
							{{shu | guolv}}
						</td>
						<td>
							{{shu | guolv}}
						</td>
						<td>
							{{shu | guolv}}
						</td>
						<td>
							{{shu | guolv}}
						</td>
					</tr>
				</tbody>
			</table>
			
			<div class="fenye" v-show="false" style="text-align: center;">
				<el-pagination
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :hide-on-single-page="yindi"
				  :current-page="currentPage4"
				  :page-sizes="[100, 200, 300, 400]"
				  :page-size="100"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="4001">
				</el-pagination>
			</div>
			
			<div class="fufei">
				免费版仅可查看6条数据，点击<span @click="open">立即升级</span>查看更多数据
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'daihuoshipinbang',
		data(){
			return{
				shu:234232,
				
				//日期选择
				pickerOptions: {
				  disabledDate(time) {
					return time.getTime() > Date.now();
				  },
				  shortcuts: [{
					text: '今天',
					onClick(picker) {
					  picker.$emit('pick', new Date());
					}
				  }, {
					text: '昨天',
					onClick(picker) {
					  const date = new Date();
					  date.setTime(date.getTime() - 3600 * 1000 * 24);
					  picker.$emit('pick', date);
					}
				  }, {
					text: '一周前',
					onClick(picker) {
					  const date = new Date();
					  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
					  picker.$emit('pick', date);
					}
				  }]
				},
				value1: '',
				value2: '',
				
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1
			}
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			//全部分类的切换
			$(".fangke ul li").click(function(){
				$(this).css({
					"color": '#fff',
					"background-color": '#0091FF',
					"border-radius":'0.1rem' ,
				})
				$(this).siblings().css({
					'color': '#666',
					'background-color': '#fff',
					'border-radius':'0rem',
				})
			})
			
			//日榜的切换
			$(".haowubang_header1 div:nth-of-type(1) ul li").click(function(){
				$(this).css({
					"color": '#fff',
					"background-color": '#0091FF',
					"border-radius":'0.1rem' ,
				})
				$(this).siblings().css({
					'color': '#666',
					'background-color': '#fff',
					'border-radius':'0rem',
				})
			})
		},
		methods:{
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			
			open() {
				this.$confirm('此功能仅限高级版本使用，请升级后再试', '升级提示', {
				  confirmButtonText: '立即升级',
				  cancelButtonText: '我在想想',
				  type: 'warning',
				}).then(() => {
				  this.$message({
					type: 'success',
					message: '立即升级!'
				  });
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '我在想想'
				  });          
				});
			 }
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.daihuoshipinbang{
		
		.fangke{
			padding: 0.6rem 1.9rem;
			background-color: #fff;
			border-bottom:1px solid #E7E7E7 ;
			
			ul{
				list-style: none;
				li{
					cursor: pointer;
					color: #666666;
					font-size: 0.4rem;
					float: left;
					padding: 0.1rem 0.3rem;
					margin-right:0.4rem ;
					margin-bottom:0.5rem ;
				}
				li:nth-of-type(1){
					color: #fff;
					background-color: #0091FF;
					border-radius:0.1rem ;
				}
			}
			ul::after{
				content: "";
				display: block;
				clear: both;
			}
		}
		
		.haowubang_header{
			padding: 0.8rem 2rem;
			background-color: #fff;
			border-bottom-left-radius:0.1rem ;
			border-bottom-right-radius:0.1rem ;
			
			.haowubang_header1{
				float: left;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				div:nth-of-type(1){
					ul{
						list-style: none;
						
						li{
							cursor: pointer;
							color: #666;
							font-size: 0.4rem;
							float: left;
							padding: 0.1rem 0.4rem;
							margin-right:0.4rem ;
						}
						li:nth-of-type(1){
							color: #fff;
							background-color: #0091FF;
							border-radius:0.1rem ;
						}
					}
					ul::after{
						content: "";
						display: block;
						clear: both;
					}
				}
				div:nth-of-type(2){
					color: #666;
					font-size: 0.4rem;
					margin-right:0.8rem ;
				}
				div:nth-of-type(3){
					color: #666;
					font-size: 0.4rem;
					cursor: pointer;
					i{
						margin-left:0.2rem ;
					}
				}
				div:nth-of-type(3):hover{
					color: #0091FF;
				}
			}
			.haowubang_header2{
				float: right;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				span:nth-of-type(1){
					color: #333333;
					font-size: 0.4rem;
				}
				span:nth-of-type(2){
					color: #666666;
					font-size: 0.4rem;
					margin-right:1rem ;
				}
				
			}
		}
		.haowubang_header::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.haowubiao{
			margin-top:1rem ;
			background-color: #fff;
			border-radius:0.1rem ;
			
			table{
				padding: 0.4rem 0.8rem;
				width: 100%;
				
				th{
					color: #333333;
					font-size: 0.42rem;
					font-weight: normal;
					padding: 0.8rem 0;
					text-align: center;
				}
				th:nth-of-type(1){
					width: 3rem;
				}
				th:nth-of-type(2){
					text-align: left;
					width: 12rem;
				}
				td{
					padding: 0.8rem 0;
					color: #666666;
					font-size: 0.4rem;
					text-align: center;
				}
				tr:hover td{
					background-color: rgba(229,244,255,1);
				}
				
				td:nth-of-type(2){
					text-align: left;
					width: 15rem;
					display: flex;
					.shibiaogeleft{
						// float: left;
						img{
							width: 2rem;
							height: 2.8rem;
						}
					}
					.shibiaogeright{
						margin-left:0.6rem ;
						// float: left;
						color: #666;
						
						p:nth-of-type(1){
							width: 12rem;
							font-size: 0.4rem;
							
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
						}
						p:nth-of-type(2){
							width: 12rem;
							margin: 0.6rem 0;
							display: flex;
							align-items: center;
							img{
								width: 0.8rem;
							}
							span:nth-of-type(1){
								display: block;
								text-align: center;
								font-size: 0.35rem;
								margin-left:0.4rem ;
							}
						}
						p:nth-of-type(3){
							font-size: 0.35rem;
							color: #999;
							
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
						}
					}
				}
				td:nth-of-type(2)::after{
					content: "";
					display: block;
					clear: both;
				}
				
				td:last-child{
					color: #666;
					font-size: 0.4rem;
					
					i{
						cursor: pointer;
					}
					
					i:nth-of-type(2){
						margin: 0 0.2rem;
					}
				}
				
			}
			
			.fufei{
				text-align: center;
				color: #666666;
				font-size: 0.4rem;
				padding: 0.4rem 0;
				
				span{
					cursor: pointer;
					color: #0091FF;
					font-size: 0.4rem;
				}
			}
		}
	}
</style>
